<script setup lang="ts">
import { http } from '@/utils/imagehttp'
import { onMounted, ref } from 'vue'
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const imgList = ref<string[]>([
    'https://gitcode.net/qq_44112897/images/-/raw/master/comic/5.jpg',
    'https://gitcode.net/qq_44112897/images/-/raw/master/comic/40.jpg',
    'https://gitcode.net/qq_44112897/images/-/raw/master/comic/15.jpg'
]);
const navIndex = ref(1);
const checkIndex = async (index: number) => {
    navIndex.value = index;
    if (index === 1) {
        uni.redirectTo({ url: '/pages/shequ/faxian' })
    }
    if (index === 0) {
        uni.redirectTo({ url: '/pages/shequ/index' })
    }
    if (index === 2) {
        uni.redirectTo({ url: '/pages/shequ/quanzi' })
    }
};
const navIndex1 = ref(0)
const checkIndex1 = async (index: number) => {
    navIndex1.value = index
}
</script>

<template>
    <view class="viewport">
        <view class="box1">
            <view class="header">
                <navigator url="/pages/index/index" class="left" open-type="switchTab">首页</navigator>
                <view class="mid">
                    <view class="search-box">
                        <img src="@/static/images/search@2x.png" alt="" class="search-img" />
                        <input type="text" placeholder="关键词搜索" class="search-input" />
                    </view>
                </view>
                <view class="right">
                    <img src="@/static/images/mail@2x.png" class="email-img" />
                </view>

            </view>
            <swiper :autoplay="false" interval="true" duration="500" :circular="true" indicator-dots="true"
                class="subfloat_pictures">
                <swiper-item v-for="(image, index) in imgList" :key="index">
                    <image :src="image" mode="aspectFill" class="cannaserver" />
                </swiper-item>
            </swiper>
            <view class="heads">
                <view class="head-nav">
                    <view :class="navIndex == 0 ? 'activite' : ''" @click="checkIndex(0)">关注</view>
                    <view :class="navIndex == 1 ? 'activite' : ''" @click="checkIndex(1)">发现</view>
                    <view :class="navIndex == 2 ? 'activite' : ''" @click="checkIndex(2)">圈子</view>
                </view>
            </view>
            <view class="content1" v-if="navIndex == 0">
                <guanzhu></guanzhu>
            </view>
            <view class="content2" v-if="navIndex == 1">
                <view class="boxmid">
                    <view class="head-nav1">
                        <view :class="navIndex1 == 0 ? 'activite1' : ''" @click="checkIndex1(0)">热门话题</view>
                        <view :class="navIndex1 == 1 ? 'activite1' : ''" @click="checkIndex1(1)">热门圈子</view>
                    </view>
                    <view class="content11" v-if="navIndex1 == 0">
                        <view class="con-box1">
                            <view class="transan"></view>
                            <view class="transi"> 热门话题内容</view>
                        </view>
                    </view>
                    <view class="content22" v-if="navIndex1 == 1">
                        <view class="con-box2">
                            <view class="transan2"></view>
                            <view class="transi2"> 热门话题内容</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="content3" v-if="navIndex == 2">
                <guanzhu></guanzhu>
            </view>
        </view>
    </view>
</template>

<style lang="scss">
.viewport {
    height: 100%;
    display: flex;
    margin: 0 64rpx;
    flex-direction: column;
}

.scroll-view {
    flex: 1;
    overflow: hidden;
}

.box1 {
    display: flex;
    height: 826rpx;
    width: 100%;
    background: #10e330;
    flex-direction: column;

    .header {
        display: flex;
        height: 92rpx;
        margin-top: 120rpx;
        background-color: #fff;

        .left {
            margin-top: 0;
            display: flex;
            align-items: center;
            flex-grow: 1;
            font-size: 30rpx;
            font-family: Inter, Inter-700;
            font-weight: 700;
            text-align: CENTER;
            color: #f2bb16;
        }

        .mid {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;

            .search-box {
                display: flex;
                align-items: center;
                width: 452rpx;
                height: 70rpx;
                background: #fffaec;
                border-radius: 20rpx;
                box-shadow: 0rpx 8rpx 40rpx 0rpx rgba(0, 0, 0, 0.15);

                .search-img {
                    width: 34rpx;
                    height: 34rpx;
                    margin-left: 18rpx;
                    margin-right: 10rpx;
                }

                .search-input {
                    font-size: 30rpx;
                    font-weight: 400;

                    &::placeholder {
                        color: #000000 26%;
                    }
                }
            }
        }

        .right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-grow: 1;

            .email-img {
                width: 48rpx;
                height: 48rpx;
            }
        }
    }

    .subfloat_pictures {
        display: flex;
        margin-top: 24rpx;
        align-items: center;
        width: 632rpx;
        height: 150rpx;
        overflow: hidden;
        border-radius: 20rpx;
        box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);

        .cannaserver {
            display: flex;
            align-items: center;
            margin: 0 auto;
            width: 632rpx;
            height: 150rpx;
            border-radius: 20rpx;
            box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
        }
    }

    .head-nav {
        /* margin: 24rpx 64rpx; */
        margin-top: 36rpx;
        margin-right: 368rpx;
        height: 74rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: LEFT;
        color: #949090;
        line-height: 38rpx;

    }

    .activite {
        display: flex;
        color: #000000;
        text-decoration: underline;
        text-decoration-color: #f2bb16;
        font-weight: bolder 30rpx;
        text-underline-offset: 10rpx;

    }

    .head-nav>view {
        padding-bottom: 10rpx;

    }

    .content2 {
        display: flex;
        background: #1dacd7;
        width: 100%;
        height: 402rpx;

        .boxmid {
            display: flex;
            flex-direction: column;
            height: 332rpx;
            width: 628rpx;
            background: #f8d770;
            border-radius: 20rpx;

            .content11 {
                display: flex;
                height: 240rpx;
                margin-left: 40rpx;
                width: 548rpx;

                .transan {
                    display: flex;
                    position: absolute;
                    margin-left: 60rpx;
                    width: 0;
                    height: 0;
                    border-bottom: 25rpx solid rgb(252, 252, 252);
                    border-left: 15rpx solid transparent;
                    border-right: 15rpx solid transparent;
                }

                .transi {
                    display: flex;
                    margin-top: 22rpx;
                    height: 250rpx;
                    width: 548rpx;
                    background: #fff;
                    border-radius: 40rpx;

                }

                .transi::after {
                    display: flex;
                    margin-left: 60rpx;
                    width: 0;
                    height: 0;
                    border-bottom: 30rpx solid rgb(252, 252, 252);
                    border-left: 15rpx solid transparent;
                    /* 左边透明 */
                    border-right: 15rpx solid transparent;
                }
            }

            .content22 {
                display: flex;
                height: 240rpx;
                margin-left: 40rpx;
                width: 548rpx;

                .transan2 {
                    display: flex;
                    position: absolute;
                    margin-left: 235rpx;
                    width: 0;
                    height: 0;
                    border-bottom: 25rpx solid rgb(252, 252, 252);
                    border-left: 15rpx solid transparent;
                    border-right: 15rpx solid transparent;
                }

                .transi2 {
                    display: flex;
                    margin-top: 22rpx;
                    height: 250rpx;
                    width: 548rpx;
                    background: #fff;
                    border-radius: 40rpx;

                }

                .transi2::after {
                    display: flex;
                    margin-left: 60rpx;
                    width: 0;
                    height: 0;
                    border-bottom: 30rpx solid rgb(252, 252, 252);
                    border-left: 15rpx solid transparent;
                    /* 左边透明 */
                    border-right: 15rpx solid transparent;
                }
            }
        }
    }

    .head-nav1 {
        margin-top: 20rpx;
        margin-right: 280rpx;
        margin-left: 50rpx;
        height: 40rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: LEFT;
        color: #545050;
        line-height: 38rpx;

    }

    .activite1 {
        display: flex;
        color: #000000;

    }

    .head-nav1>view {
        padding-bottom: 10rpx;

    }
}
</style>
